Dans cette dernière leçon sur le module de fenêtre du navigateur, nous examinerons la propriété de contenu Web du module
de fenêtre du navigateur.
Plus important encore, la propriété de contenu Web est un module en soi, bien qu'elle soit une propriété de
fenêtre de navigateur, d'où sa propre leçon dédiée.
La meilleure façon de penser à une instance de contenu Web est alors qu'elle représente le contenu chargé dans une
fenêtre de navigateur.
Ainsi, la fenêtre du navigateur est l'endroit où notre contenu est chargé en tant qu'instance de navigateur acromion, puis
ce contenu même étant le contenu Web.
Comme nous travaillerons avec le contenu Web de notre fenêtre principale dans cette leçon, je commencerai par créer
une référence à cette propriété.
Voyons pour le contenu Web, la fenêtre principale égale Le contenu Web DOT nous évite d'avoir à référencer le contenu Web complet de la fenêtre
du navigateur à chaque fois.
Commentez les outils de développement pour le moment et déconnectez cette nouvelle variable de contenu Web.
Pour le reste de cette leçon, j'apporterai ma fenêtre de terminal sur mon bureau pour éviter de basculer afin de
faire de la place pour cette fenêtre.
Je vais également décaler la position de départ de notre fenêtre principale vers la gauche du paramètre d'écran sur le
constructeur de la fenêtre du navigateur, une propriété X de 100 et une propriété Y de 100 également, ce qui signifie lancer cette fenêtre à 100
pixels à partir de la gauche de l'écran étant l'axe des x et à 100 pixels du haut de
l'écran étant l'axe des y.
J'ai déjà l'application en cours d'exécution avec la commande watch, alors enregistrez-la ici.
Nous voyons dans le terminal que notre objet de contenu Web d'instances de fenêtre principale est verrouillé, la
fenêtre principale lançant 100 pixels dans l'écran avec notre contenu Web instantané référencé.
Passons à quelques fonctions et événements utiles de ce module.
Encore une fois, il s'agit d'une très grande API, mais pour la plupart, c'est un émetteur d'événement de nœud standard, tout comme l'instance
électron up ou une instance de fenêtre de navigateur.
Et de nombreux événements et fonctions seront familiers ou explicites.
Pour commencer, nous voyons à nouveau quelques méthodes statiques simples répertoriées, familières, obtenir tout le contenu Web, obtenir le contenu
Web actuellement ciblé ou obtenir une instance de contenu Web spécifique à partir de son ID.
Maintenant, comme mentionné, le contenu Web est un module en soi, bien qu'il soit une propriété du module de fenêtre du
navigateur.
Ainsi, pour accéder aux méthodes statiques, c'est-à-dire aux méthodes non liées à une instance de contenu Web spécifique, nous
devrons utiliser directement le module de contenu Web.
Par exemple, déconnexion du contenu Web dot obtenir tout le contenu Web.
Nécessitant ce module de contenu Web, comme pour tout autre module électronique.
Comme cette sauvegarde.
Et là, nous obtenons exactement le même journal qu'avant, sauf que cette fois, c'est à l'intérieur d'un tableau.
Cela étant, comme nous n'avons qu'une seule instance de contenu Web, je vais effacer cela.
Revenez à la documentation, et si nous faisons défiler un peu plus bas, la prochaine section plutôt grande
concerne les événements instantanés.
Nous avons vu quelques-uns de ces événements directement sur le module de la fenêtre du navigateur.
Mais ici, nous obtenons maintenant des événements beaucoup plus détaillés relatifs à l'état du contenu en cours de chargement dans la
fenêtre du navigateur.
Par exemple, a terminé le chargement par rapport à Dom prêt à des événements similaires, mais avec des utilisateurs très
différents.
Je les ai déconnectés pour montrer le contenu Web sur le chargement terminé.
Passez un rappel dans lequel un contenu de déconnexion est entièrement chargé, donc cet événement, ce qui signifie que tout notre contenu est
prêt.
Dupliquer ceci pour domme, prêt?
Déconnexion de domme prête cette fois, signalant que la structure ou le modèle d'objet de document du HTML en cours de chargement est prêt, il
se peut que nous ayons encore des images déchargées, etc. , mais la structure est prête à
interagir avec.
J'ajouterai une image distante pour mieux illustrer ce HTML indexé ouvert.
En utilisant le service Place Kitten avec une image de 500 par 500, notez maintenant que le dôme prêt se déclenchera dès que
tout le HDMI sera prêt, y compris l'étiquette d'image, mais que le chargement terminé ne se déclenchera qu'une fois le
contenu de l'image également chargé.
Je vais ralentir un peu l'enregistrement pour mieux démontrer que Save Dom est prêt.
Le feu est presque immédiatement car il y a très peu de XHTML et dès que le contenu de l'image est
chargé, le chargement est terminé.
Se déclenche également, ce qui signifie que ces événements de contenu Web nous donnent un meilleur contrôle sur le point exact de chargement
du contenu.
Nous avons également plusieurs événements intermédiaires, comme si Fallowed a démarré le chargement ou arrêté le chargement.
Puis un peu plus bas, nous avons ce nouvel événement de fenêtre, les nouvelles fenêtres étant un sujet important dans un électron, car
nous ne voulons pas vraiment que les liens HDMI créent simplement de nouvelles fenêtres sans notre permission, en particulier lorsque vous
travaillez avec du contenu distant, ce qui être évités autant que possible.
Le comportement par défaut est alors pour Electron de créer simplement une nouvelle instance de fenêtre de navigateur et de charger
le contenu de la nouvelle fenêtre dans cette fenêtre.
Je vais montrer en double l'un des commentaires de ces auditeurs sur nos événements d'état de contenu.
Changez cet événement en nouvelle fenêtre, uniquement pour observer pour l'instant avec le nouvel événement de fenêtre, rappelez-nous, en nous
fournissant l'objet d'événement habituel et l'Eurail qui a déclenché la nouvelle fenêtre.
Donc, en utilisant cela, notre déconnexion dans une chaîne interpolée, la création d'une nouvelle fenêtre pour cet appel, votre argument oral
aura également besoin d'un lien pour tester cette valeur, changez l'endroit, obtenez une image comme lien au lieu de
vous relier à cette même image avec un H3 lien texte du chaton.
Sans oublier la partie la plus importante de ce lien, un attribut cible avec une valeur de soulignement vide
indiquant au navigateur ou à la fenêtre du navigateur dans notre cas de l'ouvrir dans une
nouvelle fenêtre au lieu de simplement naviguer vers le lien, enregistrez-le et ne cliquez pas toujours sur ce nouveau lien.
Et Electron crée automatiquement une nouvelle fenêtre de navigateur avec cette image comme contenu Web.
Nous avons également le message de journal de l'événement de nouvelle fenêtre dans le terminal pointant vers cette URL de lien.
Donc, bien que cela soit très pratique, nous n'avons pas trop de contrôle sur les nouvelles fenêtres automatiques, c'est là que
l'événement de nouvelle fenêtre peut nous aider à croiser l'ouverture de nouvelles fenêtres et à le gérer nous-mêmes à la
place.
Cela devrait-il être la condition requise pour votre application spécifique?
Par exemple, dans cet événement, nous pouvons appeler l'objet événement pour empêcher une valeur par défaut pour empêcher l'électron de suivre
le comportement par défaut de création d'une nouvelle fenêtre de navigateur enregistrer.
Cliquez à nouveau sur ce lien, et cette fois, rien ne se passe en dehors de notre message de blog dans l'événement
de nouvelle fenêtre de cette façon, alors nous pouvons utiliser à la place ce que vous Aurel, qui aurait déclenché la
nouvelle fenêtre et à la place charger ce contenu dans une fenêtre de notre choix ou faites ce que nous voulons avec.
Beaucoup plus de contrôle.
Nous avons également d'autres événements pour contrôler la navigation à
partir des liens standard.
Avez-vous commencé la navigation, qui sera immédiatement après un clic ou redirigera pour intercepter la redirection déclenchée par des liens, nous pouvons
également écouter les contenus Web qui ne répondent plus, éventuellement en utilisant cela pour informer l'utilisateur de
tels événements avec un chargeur ou quelque chose, ou même lorsque le contenu Web plante, nous
permettant peut-être de recharger manuellement le contenu à nouveau.
N'oubliez pas que le contenu Web peut se bloquer dans le processus de rendu et que le processus principal restera correct.
Ces événements sont de bons ajouts pour les applications distribuées.
Puis un peu plus bas, nous voyons avant l'entrée un événement très utile pour capturer l'entrée utilisateur.
Voyons tout cela dupliquer à nouveau cet événement.
Commentez l'ancien.
En écoutant avant l'événement d'entrée, qui nous fournit dans son rappel l'objet événement et l'objet d'entrée,
cet objet d'entrée contenant tout un tas d'informations sur l'entrée utilisateur capturée,
par exemple, sont la touche point d'entrée de déconnexion, suivie du point d'entrée tapez enregistrer.
Je vais appuyer pour qu'une touche de mon clavier et leurs deux événements soient enregistrés en premier, l'ikki étant enfoncé,
étant appelé touche vers le bas, puis immédiatement après pour la même touche, la touche vers le haut étant lorsque j'ai
relâché la touche, appuyez sur Entrée et l'heure.
Donc un événement extrêmement utile pour vérifier ou même modifier l'entrée d'un utilisateur.
Ensuite, nous voyons quelques événements pour savoir quand un utilisateur s'ouvre, le panneau des outils de développement le concentre.
Et ainsi de suite, notez que la plupart des applications n'activeront bien sûr pas les outils de développement en production.
Cela ne s'appliquera qu'aux applications piratables comme le guichet automatique.
Ed, j'utilise pour ce cours des événements de certificat SSL et pour travailler avec l'authentification HTTP.
Nous avons cet événement de connexion.
Pour quiconque n'est pas familier avec l'authentification de base, c'est essentiellement un moyen de sécuriser HDB avec un simple nom d'utilisateur et
mot de passe.
J'ai lié à quelques bons articles expliquant plus en détail dans les ressources réduites.
Essentiellement, lorsqu'un utilisateur tente de visiter une querelle avec une authentification HTP de base, le navigateur demandera à l'utilisateur un
nom d'utilisateur et un mot de passe dans une application électronique.
Cependant, ce ne sera pas ainsi que nous gérons l'authentification.
Nous pouvons donc permettre à l'utilisateur de charger du contenu sécurisé en écoutant un événement de connexion, puis en s'authentifiant en
son nom.
Voyons un exemple simple pour ce faire, nous devons tous charger du contenu avec l'authentification HDB, alors commentez
notre fonction principale de chargement de fichier Windows en ajoutant à la place lodeiro avec cette URL HTP Bennu HDB Ben est un service simple
qui nous permet de tester toutes les manières des fonctionnalités HDB.
Ce lien est dans les ressources amoindries.
Cette URL nécessite alors un nom d'utilisateur et un mot de passe, sinon elle sera refusée avec un code de statut non autorisé quatre
contre un.
Donc, avant d'authentifier cela, voyons d'abord une authentification échouée.
Nous pouvons obtenir le code de réponse en utilisant un autre événement de contenu Web que j'ai déjà mentionné: la navigation est l'événement
qui se déclenche après une page, la navigation, que ce soit via un lien cliqué ou du contenu en cours de chargement.
L'événement nous fournit quelques arguments dans son rappel.
L'objet événement de l'Eurail auquel la navigation a eu lieu, un code d'état et un message.
Je les verrouille.
Navigué vers vous sont.
Et un deuxième regard avec le code de statut.
Et nous obtenons le journal non autorisé car le contenu sécurisé ne se charge
pas, nous allons donc gérer cet événement de connexion, le contenu Web lors de la connexion avec le rappel exposant l'objet événement, l'objet de demande d'informations et
enfin une fonction de rappel que nous pouvons utiliser pour effectuer l'authentification avec notre déconnexion en vous connectant dès
que cet événement se déclenche, puis en procédant à la connexion avec les rappels d'événement, fournissez-lui cette
fonction cet argument de rappel appelant le rappel avec le nom d'utilisateur comme premier argument étant l'utilisateur et le mot de passe
comme deuxième mot de passe.
C'est tout.
Il devrait maintenant se déclencher dès que l'authentification de base se produit, effectuer l'authentification, puis procéder au
chargement du contenu, qui à son tour le déclenchera.
Naviguez avec un statut de réussite.
Sauver.
Nous voyons la connexion et un instant plus tard, le Jason de ce HDB, mais une charge de point final nous
montre un navigateur mort avec un code d'état 200, un problème très improbable pour la plupart des applications.
Mais devriez-vous vouloir fournir à votre application des données à distance sécurisées?
C'est une solution formidable et simple.
Un peu plus bas, nous voyons un événement pour récupérer les résultats de la recherche dans une recherche
de contenu lancée avec la méthode Find in Page Instant et certains événements multimédias pour connaître l'état de la vidéo ou de
l'audio dans le contenu.
Voyons un exemple simple de cela.
Je vais commenter ces derniers.
Et a fait naviguer les événements.
Ajoutez un fichier vidéo au projet pour que nous puissions le tester avec MGM dot MP pour un petit fichier vidéo avant.
Ce fichier se trouve dans le répertoire de la leçon.
Devriez-vous utiliser le même?
Donc, ce que nous allons faire ici est d'intégrer cette vidéo dans notre HTML Index DOT HTML et d'écouter les événements de lecture
et de pause, ainsi que le contenu Web.
La lecture du média a commencé.
Dans lequel tout message analogique avec vidéo a commencé.
Dupliquez ça.
Cette fois, à l'écoute des médias, mis en pause, déconnexion de la vidéo mise en pause à cette vidéo en HTML
indexé, je remplacerai le kit EnLink en utilisant une balise vidéo avec le répertoire actuel de la source MGM dot MP car je n'ai pas
besoin de ces commandes d'ajout vidéo avec le contrôles attribut et une largeur de 650, nous devons encore modifier le contenu de
nouveau à chargement indexé sur HTML.
Commentez le HDB Bunyoro sauvegardé.
Nous voyons que la vidéo se charge et lorsque je démarre la vidéo, le premier événement se déclenche.
Pause.
La vidéo vidéo a été mise en pause.
Donc, un auditeur vraiment simple pour savoir quand un utilisateur interagit avec les médias dans votre contenu.
Le prochain événement très important que je vais démontrer est cet événement de menu contextuel.
Ceci étant quand un utilisateur.
Droite.
Cliquez sur quelque chose maintenant en ce qui concerne les menus réels, cela couvrira cela dans une leçon à venir.
Mais c'est un événement important à comprendre car les utilisateurs font souvent un clic droit pour diverses raisons.
La première chose à noter est que cet événement, bien qu'il n'ait que deux arguments sur son
rappel, contient beaucoup de données sur les seconds programmes.
Je vais vous montrer un exemple basique d'accès à cela.
Je vais dupliquer à nouveau l'un de ces événements, commenter ceux-ci à l'écoute sur notre instance de contenu Web
pour une utilisation dans le menu contextuel pour fournir des arguments de rappel, un événement et des programmes.
Et ce que je vais vous montrer, c'est comment vérifier, par exemple, si un utilisateur a cliqué sur un
élément multimédia, de quel type de support il s'agit et où l'utilisateur a cliqué dans l'application, une coordonnée X et Y.
Le menu contextuel de déconnexion s'est donc ouvert, ce qui signifie que l'utilisateur a fait un clic droit sur les programmes.
Type de support de point aux programmes X point x, y.
Param Stot, pourquoi?
Sauver.
Effectuez un clic droit sur cet élément vidéo et le menu contextuel s'est ouvert sur la vidéo à X et Y étant exactement là où
le clic s'est produit.
Donc un deuxième clic sur un point différent, ayant une coordonnée X et Y différente.
Tout aussi utile, nous pouvons également vérifier si un utilisateur a sélectionné du contenu lorsque le clic droit
se produit, changer ce journal en texte sélectionné par l'utilisateur.
Forums, texte de sélection de points, et un utilisateur devrait-il avoir du texte sélectionné?
Sommes-nous capables de copier le texte utile pour savoir s'il faut montrer à un utilisateur la commande de copie dans le menu
contextuel?
Encore une fois, nous verrons comment les créer sur le clic droit plus tard.
La sélection peut être copiée.
Le point peut copier les drapeaux d'édition de Ramsgate.
Sauver.
Je vais sélectionner cette rubrique.
Cliquez avec le bouton droit et la sélection sélectionnée par l'utilisateur peut être copiée, c'est vrai, nous sommes donc déjà en mesure d'accéder au
contenu HTML à partir du moteur de rendu directement dans le processus principal.
De retour dans les docks, nous avons quelques événements supplémentaires, la section suivante étant des méthodes d'instance,
dont certaines ont déjà vu charger euro et load file.
Bien sûr, nous les appelons à l'instant de la fenêtre du navigateur, ce n'est pas le contenu Web de
cette fenêtre de navigateur, mais c'est essentiellement la même chose avec le contenu Web étant une propriété de la fenêtre du navigateur.
Beaucoup de leurs méthodes sont partagées.
Nous pouvons également lancer, télécharger, focaliser une instance de contenu Web ou recharger le contenu manuellement, effectuer
une navigation manuelle avec go back and go forward et une méthode instantanée extrêmement utile, exécuter JavaScript dans le
contenu Web.
Voyons un exemple de cela.
Disons que nous voulons en quelque sorte utiliser ce texte de sélection que nous avons obtenu dans l'événement du menu contextuel, mais que
nous le faisons dans le contenu Web.
Je vais attribuer la sélection à une variable texte sélectionné égale le texte de sélection de paramètre appelant sur le
contenu Web.
Exécutez JavaScript avec l'alerte de code.
Texte de sélection, ce qui signifie sur le contenu Web, donc le front-end, pour ainsi dire.
Appelez la fonction d'alerte du navigateur avec n'importe quel texte sélectionné lorsqu'un utilisateur clique avec le bouton droit de la souris.
Sauvegarde ça.
Sélectionnez à nouveau ce même titre, faites un clic droit.
Et là, nous obtenons une alerte avec le texte sélectionné, un autre exemple simple de croisement de données entre le processus principal et
le moteur de rendu.
Bien entendu, cet objet de contenu Web contient de nombreuses autres fonctions et événements.
Mais après avoir vu ces quelques-uns, vous pourrez utiliser tous les autres assez facilement.
Des choses comme copier, coller, annuler, refaire et bien d'autres.
Comme pour le module de fenêtre du navigateur, je vous encourage à jeter un coup d'œil à tous les événements et méthodes
disponibles afin de savoir ce qui est disponible lors de la création de votre propre application.